<!--
 * @Date: 2024-07-17 14:27:45
 * @Autor: 叶世超
 * @LastEditors: 叶世超 yesc163@163.com
 * @LastEditTime: 2024-07-18 16:26:42
 * @FilePath: \reslib-web\src\views\knowledge\eventGraph\index.vue
 * @Description: 描述
 * @version: 版本
-->
<template>
  <div class="event-graph">
    <el-card style="width: 100%" shadow="hover">
      <div class="eg-top-box">
        <div class="tb-left">
          <div class="l-top-search">
            <el-input v-model="inputSearch" style="max-width: 100%" size="large" placeholder=""
              class="input-with-select">
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>
          <div class="l-content-image">
            <img src="@/assets/imgs/eventImage.png" width="100%" height="150px" alt="" />
          </div>
          <div class="l-bottom-box">
            <div class="b-left">
              <el-card style="width: 100%" shadow="hover">
                <timeline :timelineData="timelineData"></timeline>
              </el-card>
            </div>
            <div class="b-right">
              <el-tabs type="border-card">
                <el-tab-pane label="知识图谱">
                  <graph v-if="ckmData.length" :ckmData="ckmData" :detailsData="detailsData"></graph>
                </el-tab-pane>
                <el-tab-pane label="地理图谱">地理图谱</el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
        <div class="tb-right">
          <el-tabs type="border-card">
            <el-tab-pane label="事件简介">
              <el-descriptions :column="1">
                <el-descriptions-item v-for="(item, index) in eventOverviewData" :key="index" :label="item.label"
                  min-width="100" label-align="center">{{ item.value }}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
            <el-tab-pane label="历史背景">历史背景</el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="eg-bottom-box">
        <el-tabs type="border-card">
          <el-tab-pane label="图书">图书</el-tab-pane>
          <el-tab-pane label="视频">视频</el-tab-pane>
          <el-tab-pane label="图片">图片</el-tab-pane>
          <el-tab-pane label="音频">音频</el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import * as FormApi from '@/api/knowledge/character'
import { Search } from "@element-plus/icons-vue"
import timeline from "./timeline.vue"
import graph from "./graph.vue"

// 详细信息数据
const detailsData = reactive([])
const ckmData = reactive([])
const inputSearch = ref<string>("四渡赤水")
// 事件概括数据
const eventOverviewData = [
  { label: "名称", value: "南昌起义" },
  { label: "发生时间", value: "1927年8月1日" },
  { label: "地点", value: "江西南昌" },
  { label: "参战方", value: "中共和国民党" },
  { label: "结果", value: "创立了中国共产党领导的正规军事武装力量" },
  { label: "参战方兵力", value: "中共约22500余人参加" },
  { label: "主要指挥官", value: "周恩来、贺龙、叶挺、刘伯承、朱德等" },
  {
    label: "简介",
    value:
      "八一南昌起义，又称南昌起义或者八一起义，指在1927年8月1日中共联合国民党左派，打响了武装反抗国民党反动派的第一枪，揭开了中国共产党独立领导武装斗争和创建革命军队的序幕。1927年8月1日，中国共产党领导部分国民革命军在江西省南昌市举行的武装起义。起义由周恩来、贺龙、李立三、叶挺、朱德、刘伯承、谭平山领导。1933年月11日，中华苏维埃共和国临时中央政府根据中央革命军委员会6月30日的建议，决定8月1日为中国工农红军成立纪念日。从此，8月1日成为中国工农红军和后来的中国人民解放军的建军节。八一南昌起义，又称南昌起义或者八一起义，指在1927年8月1日中共联合国民党左派，打响了武装反抗国民党反动派的第一枪，揭开了中国共产党独立领导武装斗争和创建革命军队的序幕。1927年8月1日，中国共产党领导部分国民革命军在江西省南昌市举行的武装起义。起义由周恩来、贺龙、李立三、叶挺、朱德、刘伯承、谭平山领导。1933年7月11日，中华苏维埃共和国临时中央政府根据中央革命军委员会6月30日的建议，决定8月1日为中国工农红军成立纪念日。从此，8月1日成为中国工农红军和后来的中国人民解放军的建军节。",
  },
];
// 时间线数据
const timelineData = [
  {
    timestamp: "1月19日",
    relationship: 'enemy', // enemy(地方) || we(我方)
    orderOfBattle: 'orderOfBattle', // 战斗序列
    story: 'story', // 小故事
    content:
      "中共中央和中革军委离开遵义。中央红军分3路从遵义、桐梓、松坎地区向川南开进。",
  },
  {
    timestamp: "2月2日",
    relationship: 'we', // enemy(地方) || we(我方)
    story: 'story', // 是否有小故事
    content:
      "1月1日--上海公共租界会审公廨收归国有。同日，广州国民政府迁到武汉。汉口爆发反英怒潮。(导致1月3日汉口英租界的开始收回、…",
  },
  {
    timestamp: "2024-02",
    content:
      "1月1日--上海公共租界会审公廨收归国有。同日，广州国民政府迁到武汉。汉口爆发反英怒潮。(导致1月3日汉口英租界的开始收回、1月7日接管、2月正式收回)",
  },
  {
    timestamp: "2024-02",
    story: 'story', // 是否有小故事
    content:
      "1月1日--上海公共租界会审公廨收归国有。 同日，广州国民政府迁到武汉。汉口爆发反英怒潮。(导致1月3日汉口英租界的开始收回、1月7日接管、2月正式收回)",
  },
  {
    timestamp: "2024-01",
    content:
      "1月1日--上海公共租界会审公廨收归国有。同日，广州国民政府迁到武汉。汉口爆发反英怒潮。(导致1月3日汉口英租界的开始收回、1月7日接管、2月正式收回)1月3日--汉口爆发“一·三”事件，中国政府宣布收回汉口英租界。(同时开始收回九江的英租界，于1月7日接管、2月正式收回)",
  },
  {
    timestamp: "2024-02",
    content:
      "1月1日--上海公共租界会审公廨收归国有。 同日，广州国民政府迁到武汉。汉口爆发反英怒潮。",
  },
]

// 基本信息接口数据
const getData = () => {
  FormApi.getGraphEventById({ id: '76ecf911a6994d658c52a386eded2cb7' }).then((res) => {
    Object.assign(detailsData, res)
    getTableData()
  })
}
var numberOfCycles = 0 // forEach循环次数
const getTableData = async () => {
  let params = {
    entity: detailsData.eventName,
    graphName: detailsData.graphName
  }
  await FormApi.findNeo4jByEntity(params).then((res) => {
    res.forEach((item, index) => {
      const params2 = {
        entityName: item.endEntity,
        graphId: 'af9a743f980b48c6b57306327d3b63c5'
      }
      FormApi.getGraphEntityByName(params2)
        .then((res2) => (item.asdf = res2))
        .finally(() => {
          ++numberOfCycles
          if (numberOfCycles === res.length) Object.assign(ckmData, res)
        })
    })
  })
}
onMounted(() => {
  getData()
})
</script>
<style lang="scss" scoped>
.event-graph {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: stretch;
  flex-wrap: wrap;
  margin-bottom: 20px;
  overflow-y: auto;
  scrollbar-width: thin;

  .eg-top-box {
    width: 100%;
    height: 1000px;
    display: flex;
    margin-bottom: 10px;

    .tb-left {
      width: 75%;
      height: 100%;
      margin-right: 10px;

      .l-top-search {
        width: 100%;

        ::v-deep(.el-input-group__append) {
          background-color: #039595 !important;

          .el-button {
            color: #ffffff;
          }
        }
      }

      .l-content-image {
        padding: 10px 0;
        width: 100%;
        height: 150px;
      }

      .l-bottom-box {
        height: calc(1000px - 32px - 150px - 20px - 8px);
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: stretch;
        box-sizing: border-box;

        .b-left {
          width: 30%;
          height: 100%;
          margin-right: 10px;

          .timeline {
            height: 750px;
          }

          .el-card {
            height: 100%;

          }

        }

        .b-right {
          width: 70%;
          height: 100%;

          .graph {
            height: 720px;
          }
        }
      }
    }

    .tb-right {
      width: 25%;
    }
  }

  .eg-bottom-box {
    width: 100%;
    height: 300px;
  }
}

::v-deep(.el-tabs) {
  height: 100%;

  .el-tabs__item:hover {
    color: #039595 !important;
  }

  .el-tabs__header {
    .is-active {
      background-color: #039595;
      color: #ffffff;
    }

    .is-active:hover {
      color: #ffffff !important;

    }
  }

}
</style>
